<template>
  <div class="app">
      <header></header>
      <section>
          <Myleft :lis="lis" :curindex="curindex" @change="changeCur"/>
          <div class="right">
              <h4 v-if="lis[curindex]">{{lis[curindex].name}}</h4>
              <div class="con">
                  <dl v-for="(item) in spus" :key="item.id">
                      <dt><img :src="item.picture" alt=""></dt>
                      <dd>
                          <h4>{{item.name}}</h4>
                          <p>{{ item.description }}</p>
                          <p>{{ item.month_saled_content }} {{ item.praise_content }}</p>
                          <p><b>¥{{ item.min_price }}</b>/{{ item.unit }} <s>¥{{ item.skus[0].origin_price }}</s></p>
                          <div class="btns">
                              <template v-if="item.package_style_type > 0">
                                  <button class="jian" @click="changeNum(item.id,-1)">-</button>
                                  {{item.package_style_type }}
                              </template>
                                  <button @click="changeNum(item.id,1)">+</button>
                          </div>
                      </dd>
                  </dl>
              </div>
          </div>
      </section>
      <transition name="class1">
      <div class="mark" v-if="showMark" @click.self="setshow">
            <transition name="class2">
             <div class="mark_con">
              <div class="con_header">
                  <p>购物车</p>
                  <p><i class="icon iconfont icon-shanchu"></i> 清空购物车</p>
              </div>
              <ul>
                  <li v-for="item in markList" :key="item.id">
                      <span>{{item.name}}</span>
                      <b>￥{{item.min_price}}</b>
                        <p>
                          <button class="jian" @click="changeNum(item.id,-1)">-</button>
                          {{item.package_style_type}}
                          <button @click="changeNum(item.id,1)">+</button>
                      </p>
                  </li>
              </ul>
          </div>
            </transition>
      </div>   
      </transition>
      <footer>
          <div class="cur-con" :class="  {you:totalCount>0}" @click="setshow">
              <span v-if="totalCount>0">{{totalCount}}</span>
          </div>
          <div class="cur-money" @click="setshow">
              <p v-if="totalPrice>0" class="totalPrice"><b>￥</b>{{totalPrice}}</p>
              <p>另需配送费￥20</p>
          </div>
          <div class="cur-pay" v-if="totalPrice>=20">
              去结算
          </div>
          <div class="cur-go" v-else>
              <p>{{btnText}}</p>
          </div>
      </footer>
  </div>
</template>

<script>
import axios from "axios"
import Myleft from './compontens/Myleft.vue'
export default {
  components: { Myleft },
    data(){
        return{
            lis:[],//所有的列表
            curindex:0 ,// 高亮的下标
            showMark:false
        }
    },
    methods:{
       changeCur(index){
           this.curindex=index
    },
       changeNum(id,num){
           this.lis.forEach(item=>{
               item.spus.forEach(ite=>{
                   if(ite.id===id){
                       ite.package_style_type += num
                   }
               })
                //    将每一项的总数存到item中
            let totalCount=item.spus.reduce((prev,val)=>prev+val.package_style_type,0)
            // 给对象添加属性 让vue进行监控
            this.$set(item,"totalCount",totalCount)
            // console.log(totalCount);
        })
       
    },
    setshow(){
        if(this.totalPrice<=0)return
        this.showMark=!this.showMark
    }
   
},
    // 类似一个window.onload的组件挂载
    mounted(){
        axios.post('/list').then(res=>{
            console.log(res.data.data.food_spu_tags);
            this.lis=res.data.data.food_spu_tags
        })
    },
    computed:{
        spus(){
            return this.lis[this.curindex]?this.lis[this.curindex].spus:[]
        },
        // 总数量
        totalCount(){
            let totalCount=0
            this.lis.forEach(item=>{
                item.spus.forEach(ite=>{
                    totalCount += ite.package_style_type
                })
            })
            return totalCount
        },
        // 总价格
        totalPrice(){
            let totalPrice=0
            this.lis.forEach(item=>{
                item.spus.forEach(ite=>{
                    totalPrice += ite.package_style_type * ite.min_price
                })
            })
            return totalPrice
        },
        //结算按钮的内容
        btnText(){
        return this.totalPrice > 0 ?`差${20-this.totalPrice}起送`:'20起送'
        },
        // 把列表中大于1的商品找出来
        markList(){
            let marlist=[]
            this.lis.forEach(item=>{
                item.spus.forEach(ite=>{
                    if(ite.package_style_type>0){
                        marlist.push(ite)
                    }
                })
            })
            // console.log(marlist);
            return marlist
        }
    },
    components:{
        Myleft
    }
    
}
</script>
<style lang="less">
.app{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: "楷体";
    img{
        width: 100%;
        height: 100%;
    }
    header{
        width: 100%;
        height: 40px;
        background: #333;
    }  
    section{
        flex: 1;
        overflow: hidden;
        overflow-y: auto;
        display: flex;
    }
    footer{
        width: 100%;
        height: 60px;
        background: #3b3b3c;
        display: flex;
        align-items: center;
        color: #999;
    }
}

.right{
    flex: 1;
    overflow: auto;
    >h4{
        font-size: 14px;
        font-weight: 400;
    }
  
}
.con{
    dl{
        display: flex;
        padding: 10px;
        dt{
            width: 100px;
        }
        dd{
            flex: 1;
            position: relative;
            padding-left: 10px;
            >p{
                font-size: 12px;
            }
            b{
                color: red;
                font-size: 14px;
            }
        }
       
    }

}
.btns{
    position: absolute;
    right: 0;
    bottom: 10px;
    button{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: orange;
        border: 0;
        outline: 0;
    }
    .jian{
        background: #fff;
        border: 1px solid #ccc;
        
    }
}
.cur-con{
    width: 80px;
    height: 70px;
    background: url(./assets/meiyou.png) no-repeat center;
    position: relative;
    top: -5px;
    left: 10px;
    background-size: 55px auto;
    &.you{
        width: 80px;
        height: 70px;
        background: url(./assets/you.png) no-repeat center;
        position: relative;
        top: -5px;
        left: 10px;
        background-size: 55px auto;
    }
    span{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background:#FB4E44;
        position: absolute;
        color: #fff;
        line-height: 20px;
        text-align: center;
        transform: scale(.7);
        left: 53px;
        top: 20px;
    }
}
.cur-money{
    flex: 1;
    padding-left: 20px;
    font-size: 14px;
    .totalPrice{
        color: #fff;
        font-size: 26px;
        b{
            font-size: 20px;
            margin-right: 5px;
            font-weight: normal;
        }
    }
}
.cur-go{
    width: 90px;
    text-align: center;
}
.cur-pay{
    color: #333;
    font-size: 16px;
    height: 60px;
    line-height: 60px;
    background: #f8c74e;
    background-image: linear-gradient(
    -135deg, #FFBD27 0%, #FFD161 100%);
    padding: 0 30px;
    position: relative;
}
.mark{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 60px;
    background: rgba(0,0,0,.5);
    .mark_con{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 300px;
        background: #fff;
        overflow: auto;
        .con_header{
            display: flex;
            justify-content: space-between;
            height: 40px;
            background: #F4F4F4;
            line-height: 40px;
        }
        ul{
            padding: 0 10px;
            max-height: 300px;
            li{
                line-height: 50px;
                border-bottom: 1px solid #ccc;
                display: flex;
                justify-content: space-between;
                b{
                    text-align: right;
                    flex: 1;
                    padding-right: 50px;
                    color: #FB4E44;
                }
                button, .jian{
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                }
            }
        }
    }
}
.class1-enter, .class1-leave-to {
  opacity: 0;
}
.class1-enter-active, .class1-leave-active {
  transition: opacity 0.2s linear;
}
.class1-enter-to, .class1-leave {
  opacity: 1;
}
.class2-enter, .class2-leave-to {
  transform: translateY(100%);
}
.class2-enter-active, .class2-leave-active {
  transition: transform 3s linear;
}
.class2-enter-to, .class2-leave {
  transform: translateY(0);
}

</style>